<template>
	<view class="coupon-item" :class="{'back-1': coupon.type === 'free'}">
		<view class="discount-tag" :class="coupon.type === 'free' ? 'tag-1' : 'tag-2'">
			<image v-if="coupon.type === 'free'" src="/static/image/card/level.png"></image>
			<text>{{ coupon.tag }}</text>
		</view>
		<view class="coupon-content">
			<view class="circle-right"></view>
			<view class="circle-left"></view>
			<view class="left">
				<image :src="coupon.image" mode="aspectFill"></image>
				<view class="course-info">
					<view class="title">{{ coupon.title }}</view>
					<view class="date">{{ coupon.date }}</view>
				</view>
			</view>
			<view class="right">
				<view class="u-flex discount-flex">
					<text class="discount">{{ coupon.discount }}</text>
					<text class="unit">{{ coupon.unit }}</text>
				</view>
				<text class="type">{{ coupon.typeText }}</text>
				<view :class="coupon.type === 'free' ? 'button-2-small' : 'button-1-small'" @click="handleUse">使用</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			coupon: {
				type: Object,
				required: true
			}
		},
		methods: {
			handleUse() {
				this.$emit('use', this.coupon)
			}
		}
	}
</script>

<style lang="scss">
	.coupon-item {
		border-radius: 25rpx;
		margin-bottom: 20rpx;
		background: #fff;
		flex-direction: column;
	}

	.tag-1 {
		color: #333;
		background: linear-gradient(to right, #FBD38D 0%, #D19A43 30%);
	}

	.back-1 {
		background-color: #FFFAEE !important;
	}

	.tag-2 {
		background-color: #d1d0f9;
		color: #615DEE;
	}

	.coupon-content {
		display: flex;
		padding: 20rpx 40rpx;

		image {
			width: 150rpx;
			height: 150rpx;
			margin-right: 15rpx;
			border-radius: 8rpx;
		}

		position: relative;

		.circle-left {
			background-color: #F6F8FE;
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			border-radius: 50%;
			left: -25rpx;
			top: 70rpx;
		}

		.circle-right {
			background-color: #F6F8FE;
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			border-radius: 50%;
			right: -25rpx;
			top: 70rpx;
		}

		.left {
			display: flex;
		}

		.right {
			width: 140rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			align-items: center;
			top: -20rpx;
			justify-content: center;

			.discount {
				font-size: 50rpx;
				color: #FF0000;
				font-weight: bold;
			}

			.unit {
				font-size: 24rpx;
				margin: 5rpx 0 0 5rpx;
				color: #FF0000;
			}

			.type {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 10rpx;
			}
		}

		.course-info {
			flex: 1;
			display: flex;
			flex-direction: column;

			.title {
				font-size: 30rpx;
				color: #000000;
				font-weight: bold;
			}

			.date {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #ccb8a1;
			}
		}
	}
</style>